<template>
  <div class="final">
    <van-nav-bar title="眉州路515弄" left-arrow @click-left="onClickLeft" />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" width="100%" height="280vw" />
      </van-swipe-item>
    </van-swipe>
    <van-cell-group :border="false">
      <van-cell title="123" center>
        <template #label>
          <div class="box">近地铁</div>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 分割线 -->
    <van-divider
      :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 16px' }"
    />
    <div class="stylePrice">
      <van-cell-group inset :border="false">
        <van-cell label="租金">
          <template #title>
            <p>123<span>/月</span></p>
          </template>
          <template #label>
            <i>租金</i>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group inset :border="false">
        <van-cell label="房型">
          <template #title>
            <p>1室</p>
          </template>
          <template #label>
            <i>房型</i>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group inset :border="false">
        <van-cell label="面积">
          <template #title>
            <p>123平米</p>
          </template>
          <template #label>
            <i>面积</i>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 分割线 -->
    <van-divider
      :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 16px' }"
    />
    <van-grid :column-num="2" :border="false">
      <van-grid-item text="文字">
        <template #text>
          <p>装修：<span>精装</span></p>
        </template>
      </van-grid-item>
      <van-grid-item text="文字">
        <template #text>
          <p>朝向：<span>东</span></p>
        </template>
      </van-grid-item>
      <van-grid-item text="文字">
        <template #text>
          <p>楼层：<span>高楼层</span></p>
        </template>
      </van-grid-item>
      <van-grid-item text="文字">
        <template #text>
          <p>类型：<span>普通住宅</span></p>
        </template>
      </van-grid-item>
    </van-grid>

    <div class="grey"></div>
    <van-cell-group :border="false">
      <van-cell />
      <template #title>
        <p>小区：<span>天星小区</span></p>
      </template>
    </van-cell-group>
    <!-- <div>地图</div> -->
    <baidu-map class="getmap" @ready="mapReady" :scroll-wheel-zoom="true">
    </baidu-map>
    <div class="facilities">房屋配套</div>
    <van-divider
      :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 16px' }"
    />
    <div class="dataSun">
      <p>暂无数据</p>
    </div>
    <div class="grey"></div>
    <div class="facilities">房屋概况</div>
    <van-divider
      :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 16px' }"
    />
    <div class="details">
      <van-image
        round
        width="15vw"
        height="15vw"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <div class="detailed">
        <div class="authentication">
          <span>王女士</span>
          <van-icon name="award-o" color="#fa5741" />
          <p>已认证房主</p>
        </div>
        <van-button plain hairline type="primary" size="small"
          >发消息</van-button
        >
      </div>
    </div>
    <div class="brief">
      <p>
        1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
        2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
        3.人车分流，环境优美。
        4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
      </p>
    </div>
    <div class="grey"></div>
    <div class="facilities">猜你喜欢</div>
    <van-divider
      :style="{ color: '#ccc', borderColor: '#ccc', padding: '0 16px' }"
    />
    <Commodity
      v-for="(item, index) in list"
      :key="index"
      :item="item"
    ></Commodity>
    <div class="butto">
      <van-button type="default" class="ccc">
        <template #default>
          <van-icon name="star-o" />
          <span>收藏</span>
        </template>
      </van-button>
      <van-button type="default" class="ccc">在线咨询</van-button>
      <van-button type="primary">电话预约</van-button>
    </div>
  </div>
</template>

<script>
import Commodity from '@/components/commodity.vue'
import { houseList } from '@/api/house'
export default {
  components: {
    Commodity
  },
  name: '',
  props: {},
  data () {
    return {
      params: {
        cityId: 'AREA|dbf46d32-7e76-1196',
        start: 1,
        end: 3
      },
      list: [],
      point: '',
      active: '',
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg'
      ]
    }
  },
  async created () {
    const data = await houseList(this.params)
    // console.log(data)
    this.list = data.body.list
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    mapReady ({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(116.404, 39.915)
      map.centerAndZoom(this.point, 12)
    }
  }
}
</script>

<style scoped lang="less">
.final {
  margin-bottom: 15vw;
}
.butto {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  .ccc {
    color: #ccc;
  }
  /deep/ .van-button {
    flex: 1;
    font-size: 4.5vw;
  }
}
.brief {
  p {
    font-weight: 400;
    font-size: 4vw;
    color: #333333;
  }
}
.details {
  display: flex;
  justify-content: space-between;
  margin-top: 10vw;
  /deep/ .van-image {
    flex: 15%;
    margin-left: 3vw;
  }
  .detailed {
    flex: 85%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/ .van-button {
      margin-right: 2vw;
    }
    .authentication {
      margin-left: 2vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        position: absolute;
        font-size: 3vw;
        margin-left: 5vw;
        margin-top: 8vw;
        color: #fa5741;
      }
    }
  }
}
.dataSun {
  p {
    margin-left: 3vw;
  }
}
.facilities {
  margin-left: 3vw;
  font-weight: 700;
}
.getmap {
  width: 100%;
  height: 60vw;
  text-align: center;
  background-color: #ccc;
}
/deep/ .van-cell-group__title {
  margin: 0;
  p {
    margin: 0;
    span {
      color: #333;
    }
  }
}
.box {
  width: 10vw;
  height: 5vw;
  background-color: #e1f5f8;
  color: #39becd;
}
.stylePrice {
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  p {
    font-size: 5vw;
    color: red;
    font-weight: 700;
    margin-bottom: 0;
  }
  i {
    font-style: normal;
    font-size: 3.5vw;
  }
}
.van-grid {
  /deep/ .van-grid-item {
    height: 7vw;
    p {
      margin: 0;
      font-size: 3.5vw;
      color: #ccc;
      text-align: center;
      span {
        color: #333;
      }
    }
  }
}
.grey {
  width: 100%;
  height: 4vw;
  background-color: #f6f5f6;
}
</style>
